<template>
  <view class="">
    <!-- 头部搜索 -->
    <!-- 	<view class="top">
			<image src="../../../static/images/calendar.png" mode=""></image>
			<input type="text" value="" placeholder="请输入姓名、电话" />
		</view> -->
    <!-- 标题人数 -->
    <view class="main">
      <view class="title">
        <image src="../../../static/images/mytitle.png" mode=""></image>
      </view>
      <view class="people">
        <view class="peoples" v-for="(item, index) in people" :key="index">
          <view class="">{{item.number}}</view>
          <view class="">{{item.name}}</view>
        </view>
      </view>
    </view>
    <!-- 好友 -->
    <view class="friends">
      <view class="title">活跃人数 <span>{{fir}}</span> </view>
      <view class="friend" v-for="(item, index) in friend" :key="index">
        <image :src="item.avatar" mode=""></image>
        <view class="right">
          <view class="name">{{item.nickname}}</view>
          <view class="time">{{item.logintime_text}}</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        numb: "5",
        fir:'',
        people: [{
            number: "0",
            name: "总人数"
          },
          {
            number: "0",
            name: "拼中次数"
          }
        ],
        friend: [{
            image: require("../../../static/images/peopletou.png"),
            name: "我的名称",
            time: "邀请时间：6月1日  16:07"
          },
          {
            image: require("../../../static/images/peopletou.png"),
            name: "我的名称",
            time: "邀请时间：6月1日  16:07"
          },
          {
            image: require("../../../static/images/peopletou.png"),
            name: "我的名称",
            time: "邀请时间：6月1日  16:07"
          }
        ]


      };
    },

    onLoad() {
      this.getfirend();
    },
    methods: {
      getfirend() {
        this.$http('commission.team').then(res => {
			console.log(res,'0000')
          this.friend = res.data.list;
          this.fir = res.data.effect;
          this.people = [{
            number: res.data.total,
            name: '好友总数'
          }, {
            number: res.data.prize,
            name: '拼中次数'
          } ]
        })
      }

    }
  };
</script>

<style lang="scss" scoped>
  .top {
    width: 715rpx;
    height: 89rpx;
    background: #FFFFFF;
    box-shadow: 0px 1px 20px 0px rgba(0, 0, 0, 0.05);
    border-radius: 12rpx;
    margin: 20rpx auto;
    overflow: hidden;

    image {
      width: 31rpx;
      height: 29rpx;
      margin: 30rpx;
      float: left;
    }

    input {
      float: right;
      margin: 14rpx;
      width: 590rpx;
      height: 61rpx;
      background: #F7F7F7;
      border-radius: 12rpx;
      padding-left: 5rpx;
    }
  }

  .main {
    width: 750rpx;
    height: 290rpx;
    background: url(../../../static/images/mypeople.png);
    background-size: 100% 100%;

    image {
      width: 383rpx;
      height: 34rpx;
      margin: 53rpx 183rpx;
    }

    .people {
      display: flex;
      justify-content: space-around;

      .peoples {
        width: 33%;
        text-align: center;
        color: white;
      }
    }
  }

  .friends {
    width: 715rpx;
    background: #FFFFFF;
    box-shadow: 0px 1rpx 20rpx 0px rgba(0, 0, 0, 0.05);
    border-radius: 12rpx;
    margin: 10rpx auto;

    .title {
      margin: 27rpx;
      padding: 27rpx 0;
      overflow: hidden;
      border-bottom: 1px solid #F1F1F1;

      span {
        float: right;
        color: #FB8130;
      }
    }

    .friend {
      margin: 0 27rpx;
      padding: 27rpx 0;
      overflow: hidden;
      border-bottom: 1px solid #F1F1F1;

      image {
        width: 74rpx;
        height: 74rpx;
        float: left;
      }

      .right {
        float: left;
        margin-left: 20rpx;

        .name {
          font-size: 26rpx;
          font-family: PingFang SC;
          font-weight: 500;
          color: #333333;
        }

        .time {
          margin-top: 10rpx;
          font-size: 24rpx;
          font-family: PingFang SC;
          font-weight: 500;
          color: #999999;
        }
      }
    }
  }
</style>
